<template>
  <div>
    <!-- 默认input展示 -->
    <a-input v-if="showInput"
             :placeholder="placeholder"
             v-model="unitName"
             @click="openDialog"
             :readOnly="true"
             :disabled="disabled"
             clearable="true">
    </a-input>

    <section v-else>
      <a-tag size="normal"
             v-for="tag in newValue"
             :key="tag"
             closable
             disable-transitions="false"
             @click="removeTag(tag)"
             @close="removeTag(tag)">
        {{ labelDataList[tag]?labelDataList[tag][pro.name]:'' }}
      </a-tag>
      <a-button size="small"
                plain
                round
                @click="openDialog">
        添加
      </a-button>
    </section>
    <DialogAntD ref="checkDialog"
                :attrs="attrs"
                :data-list="dataList"
                :notAllowed="notAllowed"
                :needUnitType="needUnitType"
                :type="'unit'"
                :pro="pro">
    </DialogAntD>
  </div>
</template>

<script>
// import {
// 	getUnitTreeByParentId,
// 	listUnitTreeReverse
// } from '@/service/api/jurisdiction.js'
import DialogAntD from './components/DialogAntD.vue'
import unitUserMixins from './mixins/unitUserMixins'
import { getUnitListByParentIdAndNeedUnitType, getTreeUnitListByUserIds } from './../api/select'

const deepClone = require('clone')

export default {
  name: 'ZSelectUnit',
  mixins: [unitUserMixins],
  components: { DialogAntD },
  props: {
    placeholder: {
      type: String,
      default: '请选择部门'
    },
    needUnitType: {
      type: String,
      default: '1'
    }
  },
  data () {
    return {
      attrs: {
        title: '请选择部门',
        type: 'unit'
      },
      pro: {
        id: 'id',
        name: 'name'
      },
      unitName: '',
      notAllowed: [],
      labelDataList: {
        '0': {
          name: '最顶级'
        }
      }
    }
  },
  computed: {},
  created () {
    if (this.topUnitId == '0') {
      return
    }
    if (this.topUnitName !== '最顶级') {
      this.labelDataList[this.topUnitId] = {
        name: this.topUnitName
      }
      return
    }
    getTreeUnitListByUserIds(this.topUnitId || '',this.deep).then((data) => {
      this.labelDataList[this.topUnitId] = {
        name: data[0] ? data[0].name : '最高级'
      }
    })
  },
  methods: {
    // 打开弹出框
    openDialog () {
      if (this.disabled) {
        return
      }
      // 初始化数据
      this.$refs.checkDialog.breadcrumbLists = [this.topUnitId]
      this.loadNode(this.topUnitId, this.needUnitType)
      this.$refs.checkDialog.tagLists = deepClone(this.newValue)
      this.$refs.checkDialog.openDialog()
    },
    // 清空方法
    clear () {
      this.unitName = ''
    },
    /**
     * 数据加载
     * @param {*} parentId 上级id
     */
    async loadNode (parentId, needUnitType) {
      this.listLoading = true
      getUnitListByParentIdAndNeedUnitType(parentId, needUnitType,this.label,this.extend).then((data) => {
        if (data) {
          this.dataList = []
          const UnitId = []
          this.notAllowed = UnitId
          data.forEach((item) => {
            this.dataList.push(item.id)
            this.labelDataList[item.id] = item
          })
          this.listLoading = false
        }
      })
      // 访问后台定义
      // await getUnitTreeByParentId(parentId, res => {
      //   // 日常判定

      // });
    },
    // 获取返现数据
    getReverseData () {
      return new Promise((resolve, reject) => {
        if (!this.newValue || this.newValue.length == 0) {
          resolve([])
          this.unitName = ''
          this.$emit('change', [], [])
          return
        }
        getTreeUnitListByUserIds(this.newValue.join(',') || '',this.deep).then((data) => {
          if (data) {
            this.$emit('change', this.newValue, data)
            this.unitName = ''
            data.forEach((item, index) => {
              // 缓存返现数据
              this.labelDataList[item.id] = item
              // 拼接选中人员名称
              this.unitName += item.fullUnitName
              if (index < data.length - 1) {
                this.unitName += '、'
              }
            })
            resolve(data)
            this.$forceUpdate()
          }
        })
      })
    }
  }
}
</script>

<style lang="less" scoped>
::v-deep .el-tag {
  // margin-right: 5px;
  margin: 3px;
}
.el-button {
  margin-left: 5px;
}
::v-deep .el-input__suffix {
  right: 10px;
}
</style>
